<template>
	<div class="mod-member-label">
		<div class="title">
			{{ $t('user.allLabels') }}
		</div>
		<div class="content">
			<div class="tabs">
				<el-tabs>
					<el-tab-pane :label="$t('user.conditionLabel')">
						<div class="bg-white add-label">
							<div class="label-wapper"><button @click="showEditFrame('',1)">{{ $t('user.addLabel') }}</button></div>
							<!-- <div class="search-wapper">
								<input placeholder="请输入标签名称">
								<button>搜索</button>
							</div> -->
						</div>
						<!-- 不同标签内容 -->
						<div class="bg-white label-content-wrapper">
							<!-- 系统标签 -->
							<!-- <div class="system-label label-box">
								<div class="label-type-wrapper">
									<span class="label-type">系统标签</span>
									<span class="label-tips">标签每天0点更新</span>
								</div>
								<div class="label-content">
									<div class="label-item">
										<div class="label-name">
											沉默客户
										</div>
										<div class="font-line">
											从未支付的客户
										</div>
										<div class="font-line">
											人数：1
										</div>
										<div class="font-line">
											更新时间：2020/09/12 02:19
										</div>
										<div class="switch">（已开启）</div>
										<div class="op-btn-wrapper">
											<span>更新</span>
											<span>关闭</span>
										</div>
									</div>
								</div>
							</div> -->
							<!-- 自定义标签 -->
							<div class="custom-label label-box">
								<div class="label-type-wrapper">
									<span class="label-type">{{ $t('user.customConditionLabel') }}</span>
									<span class="label-tips">{{ $t('user.customConditionLabelTips') }}</span>
								</div>
								<div class="label-content">
									<div v-for="(item, index) in customLabelList" :key="index" class="label-item">
										<div class="label-name">
											{{item.tagName}}
										</div>
										<div class="font-line">
											{{ $t('user.peopleNum') }}：{{item.userNum}}
										</div>
										<div class="font-line">
											{{ $t('user.creationTime') }}：{{item.createTime}}
										</div>
										<div class="font-line">
											{{ $t('user.updateTime') }}：{{item.statisticUpdateTime}}
										</div>
										<!-- <div class="switch">（已开启）</div> -->
										<div class="op-btn-wrapper">
											<span @click="refreshLabel(item.userTagId)">{{ $t('user.updateBtn') }}</span>
											<span @click="showEditFrame(item.userTagId,1)">{{ $t('user.editBtn') }}</span>
											<span @click="deleteLabel(item.userTagId)">{{ $t('user.deleteBtn') }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane :label="$t('user.manualLabel')">
						<div class="bg-white add-label">
							<div class="label-wapper"><button @click="showEditFrame('',0)">{{ $t('user.addLabel') }}</button></div>
							<!-- <div class="search-wapper">
								<input placeholder="请输入标签名称">
								<button>搜索</button>
							</div> -->
						</div>
						<!-- 标签内容 -->
						<div class="bg-white label-content-wrapper">
							<!-- 手动标签 -->
							<div class="custom-label label-box">
								<div class="label-type-wrapper">
									<span class="label-type">{{ $t('user.manualLabel') }}</span>
								</div>
								<div class="label-content">
									<div v-for="(item, index) in manualLabelList" :key="index" class="label-item">
										<div class="label-name">
											{{item.tagName}}
										</div>
										<div class="font-line">
											{{ $t('user.peopleNum') }}：{{item.userNum}}
										</div>
										<div class="font-line">
											{{ $t('user.creationTime') }}：{{item.createTime}}
										</div>
										<!-- <div class="font-line">
											更新时间：{{item.updateTime}}
										</div> -->
										<div class="op-btn-wrapper">
											<!-- <span @click="refreshLabel(item.userTagId)">{{ $t('user.update') }}</span> -->
											<span @click="showEditFrame(item.userTagId,0)">{{ $t('user.editBtn') }}</span>
											<span @click="deleteLabel(item.userTagId)">{{ $t('user.deleteBtn') }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<!-- 新增/编辑标签 -->
		<user-label-edit v-if="isShowEditFrame" ref="addOrEdit" @refreshLabelList="addOrEditSucc"></user-label-edit>
	</div>
</template>

<script>
import userLabelEdit from './userLabelEdit'
export default {
  components: {
    userLabelEdit
  },
  data () {
    return {
      isShowEditFrame: false,
      customLabelList: [],
      manualLabelList: []
    }
  },
  mounted () {
    this.getCustomLabelList()
  },
  methods: {
    // 新增弹窗
    showEditFrame (userTagId, tagType) {
      this.isShowEditFrame = true
      this.$nextTick(() => {
        this.$refs.addOrEdit.init(userTagId, tagType)
      })
    },
    // 获取自定义标签列表
    getCustomLabelList () {
      this.$http({
        url: this.$http.adornUrl('/user/userTag/getTagList'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        let customLabelList = []
        let manualLabelList = []
        for (let i = 0; i < data.length; i++) {
          if (data[i].tagType === 1) {
            customLabelList.push(data[i])
          } else if (data[i].tagType === 0) {
            manualLabelList.push(data[i])
          }
        }
        this.customLabelList = customLabelList
        this.manualLabelList = manualLabelList
      })
    },
    refreshLabel (userTagId) {
      this.$http({
        url: this.$http.adornUrl('/user/userTag/refresh/' + userTagId),
        method: 'GET',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        this.getCustomLabelList()
        this.$message.success(this.$i18n.t('user.updateSucceeded'))
      })
    },
    deleteLabel (userTagId) {
      this.$http({
        url: this.$http.adornUrl('/user/userTag/' + userTagId),
        method: 'DELETE',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        this.getCustomLabelList()
        this.$message.success(this.$i18n.t('user.deletionSucceeded'))
      })
    },
    addOrEditSucc (data) {
      this.isShowEditFrame = false
      if (data) {
        this.getCustomLabelList()
      }
    }
  }
}
</script>

<style lang="scss">
.mod-member-label {
  .title {
		font-size: 16px;
		font-weight: 700;
    padding: 10px 10px 10px 0;
		margin-bottom: 15px;
  }
	.content{
		min-height: 300px;
		padding: 10px;
		background: #f2f2f6;
		border-radius: 6px;
	}
	.content .bg-white{
		background: #fff;
	}
	/* 标签选择 */
	.content .tabs{
		margin: 10px 0 12px;
	}
	.content .tabs .el-tabs__header{
		margin: 0;
	}
	/* 新增标签 */
	.content .add-label{
		display: flex;
		padding: 10px;
		border-radius: 6px;
		margin-bottom: 10px;
	}
	.content .add-label .label-wapper button {
		height: 32px;
		font-size: 12px;
		padding: 0 12px;
		background: #fff;
		border: 1px solid #ededed;
		border-radius: 5px;
		margin-left: 10px;
	}
	.content .add-label .label-wapper button:hover{
		color: #2589FF;
		border: 1px solid #2589FF;
	}
	.content .add-label .search-wapper{
		display: flex;
		margin-left: auto;
		margin-right: 10px;
	}
	.content .add-label .search-wapper input {
		width: 138px;
		height: 32px;
		padding: 0 10px;
		border: 1px solid #e0e0e0;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.content .add-label .search-wapper button {
		height: 32px;
		font-size: 12px;
		padding: 0 10px;
		background: #fff;
		border: 1px solid #ededed;
		border-left: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	/* 不同类型标签的内容 */
	.content .label-content-wrapper{
		padding: 10px 10px 10px 20px;
		border-radius: 6px;
	}
	.content .label-content-wrapper .label-box .label-type-wrapper{
		margin: 10px 0;
	}
	.content .label-content-wrapper .label-box .label-type-wrapper .label-type{
		font-size: 16px;
		font-weight: bold;
	}
	.content .label-content-wrapper .label-box .label-type-wrapper .label-tips{
		font-size: 12px;
		color:#9797A1;
		padding-left: 10px;
	}
	.content .label-content-wrapper .label-box .label-content{
		display: flex;
		flex-wrap: wrap;
	}
	.content .label-content-wrapper .label-box .label-content .label-item{
		position: relative;
		box-sizing: content-box;
		width: 198px;
    height: 118px;
		font-size: 12px;
		padding: 10px;
		border: 1px solid #E3E2E5;
		border-radius: 5px;
		margin: 0 5px 10px 0;
	}
	.content .label-content-wrapper .label-box .label-content .label-item .font-line{
		margin-bottom: 10px;
	}
	.content .label-content-wrapper .label-box .label-content .label-item .label-name{
		height: 30px;
		font-weight: 700;
		padding: 0 0 10px;
	}
	.content .label-content-wrapper .label-box .label-content .label-item .op-btn-wrapper{
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: #2589FF;
	}
	.content .label-content-wrapper .label-box .label-content .label-item .op-btn-wrapper span{
		cursor: pointer;
		margin-left: 10px;
	}
	.content .label-content-wrapper .label-box .label-content .label-item .switch{
		position: absolute;
		top: 10px;
		left: 60px;
	}
	// 弹框
	.el-dialog{
		width: 1000px;
	}
}
</style>
